<template>
  <div class="container">
    <!-- 筛选列表 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="姓名：" prop="studentName">
            <el-input
              v-model="queryParams.studentName"
              placeholder="请输入姓名"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="身份证号：" prop="sfzNum">
            <el-input
              v-model="queryParams.sfzNum"
              placeholder="请输入身份证号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="准考证号：" prop="zkzNum">
            <el-input
              v-model="queryParams.zkzNum"
              placeholder="请输入准考证号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="科目：" prop="subjectId">
            <el-select
              v-model="subjectName"
              placeholder="请选择科目"
              clearable
              size="small"
              @change="changeToGetQuesList"
            >
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题号：" prop="quesId">
            <el-select
              v-model="queryParams.quesId"
              placeholder="请选择题号"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in quesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渲染状态：" prop="renderStatus">
            <el-select
              v-model="queryParams.renderStatus"
              placeholder="请选择渲染状态"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in drawStatus"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>渲染列表</span>
      </div>
      <div class="text item">
        <el-table
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column label="姓名" align="center" prop="studentName"/>
          <el-table-column label="身份证号" align="center" prop="sfzNum"/>
          <el-table-column label="准考证号" align="center" prop="zkzNum"/>
          <el-table-column label="科目" align="center" prop="subjectName"/>
          <el-table-column label="题号" align="center" prop="quesId"/>
          <el-table-column label="渲染状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.renderStatus==0">未渲染</span>
              <span v-else>已渲染</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-s-help"
                @click="drawDB(scope.row)"
              >渲染
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row)"
              >查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--查看弹框-->
      <preview-page :dialogVisibleFu="dialogVisibleFu" :formDataFu="formDataFu" @closeDialog="closeDialog"></preview-page>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
  import {getQuestions, getSeek2, readDB} from "@/api/toolsystem/draw";
  import previewPage from "@/components/ToolSystem/Draw/previewPage";
  export default {
    name: "studentList",
    props: {
      formData: [Object],
      subjectList: [Array]
    },
    components:{ previewPage },
    data() {
      return {
        id: '',
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 表格数据
        tableData: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentName: null,
          sfzNum: null,
          zkzNum: null,
          subjectId: null,
          quesId: null,
          renderStatus: null,
        },
        subjectName: null,
        quesList: [],// 筛选-题号列表
        // subjectList:[],// 筛选-科目列表
        drawStatus: [], // 筛选-渲染状态列表
        formDataFu: {}, // 传给子组件的数据
        dialogVisibleFu: false // 控制查看弹框显示与隐藏
      };
    },
    watch: {
      formData(val) {
        this.subjectName = val.subjectName
        this.queryParams.subjectId = val.subjectId
        this.queryParams.quesId = val.quesId
        this.getList()
      },
    },
    created() {
      this.getDicts("draw_stu_status").then(response => {
        this.drawStatus = response.data;
      });
      this.getList()
    },
    methods: {
      // 子组件触发-关闭弹框
      closeDialog(val){
        this.dialogVisibleFu = val
      },
      // 查看按钮
      handleView(row) {
        this.formDataFu = {
          quesId: row.quesId,
          zkzNum: row.zkzNum
        }
        this.dialogVisibleFu = true;
      },
      // 渲染操作
      drawDB(row) {
        console.log(row)
        this.$confirm(
          '是否确认渲染',
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            let obj = {
              quesIds: [row.quesId]
            }
            readDB(obj, row.zkzNum)
              .then(response => {
                console.log(response);
                if (response.code != 200) {
                  return this.msgError(response.msg);
                }
                this.msgSuccess(response.msg);
                this.getList();
              })
              .catch(error => {
                console.log(error);
              });
          })
          .catch(() => {
            this.msgInfo("取消渲染");
          });
      },
      // 筛选-获取题号列表
      changeToGetQuesList(val) {
        this.queryParams.subjectId = val;
        this.queryParams.quesId = null;
        getQuestions({id: val})
          .then(response => {
            console.log(response);
            this.quesList = response;
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 查询列表
      getList() {
        this.loading = true;
        getSeek2(this.queryParams)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }

            this.tableData = response.rows;
            this.total = response.total;
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            console.log(error);
          });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["queryForm"].resetFields();
        this.subjectName = null;
        this.quesList = [];
        this.handleQuery();
      },
    }
  };
</script>

<style scoped>
  @import "../../../assets/styles/card.scss";
</style>
